<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { showImagePreview } from "vant";
import { useI18n } from "vue-i18n";
const { t } = useI18n();

const route = useRoute();
const getAssetsFile = (folder, url) => {
  return new URL(`/public/img/${folder}/${url}.jpg`, import.meta.url).href;
};
// let photoMap = ref({
//   pyq: [
//     { id: 1, url: "../../assets/gzpyq/gzpyq1.jpg" },
//     { id: 2, url: "../../assets/gzpyq/gzpyq2.jpg" },
//     { id: 3, url: "../../assets/gzpyq/gzpyq3.jpg" },
//     { id: 4, url: "../../assets/gzpyq/gzpyq4.jpg" },
//     { id: 5, url: "../../assets/gzpyq/gzpyq5.jpg" },
//     { id: 6, url: "../../assets/gzpyq/gzpyq6.jpg" },
//     { id: 7, url: "../../assets/gzpyq/gzpyq7.jpg" },
//     { id: 8, url: "../../assets/gzpyq/gzpyq8.jpg" },
//     { id: 9, url: "../../assets/gzpyq/gzpyq9.jpg" },
//     { id: 10, url: "../../assets/gzpyq/gzpyq10.jpg" },
//     { id: 11, url: "../../assets/gzpyq/gzpyq11.jpg" },
//     { id: 12, url: "../../assets/gzpyq/gzpyq12.jpg" },
//     { id: 13, url: "../../assets/gzpyq/gzpyq13.jpg" },
//   ],
//   "3n": [
//     { id: 1, url: "../../assets/tingshen3n/tingshen1.jpg" },
//     { id: 2, url: "../../assets/tingshen3n/tingshen2.jpg" },
//     { id: 3, url: "../../assets/tingshen3n/tingshen3.jpg" },
//     { id: 4, url: "../../assets/tingshen3n/tingshen4.jpg" },
//     { id: 5, url: "../../assets/tingshen3n/tingshen5.jpg" },
//     { id: 6, url: "../../assets/tingshen3n/tingshen6.jpg" },
//     { id: 7, url: "../../assets/tingshen3n/tingshen7.jpg" },
//     { id: 8, url: "../../assets/tingshen3n/tingshen8.jpg" },
//     { id: 9, url: "../../assets/tingshen3n/tingshen9.jpg" },
//     { id: 10, url: "../../assets/tingshen3n/tingshen10.jpg" },
//     { id: 11, url: "../../assets/tingshen3n/tingshen11.jpg" },
//     { id: 12, url: "../../assets/tingshen3n/tingshen12.jpg" },
//     { id: 13, url: "../../assets/tingshen3n/tingshen13.jpg" },
//     { id: 14, url: "../../assets/tingshen3n/tingshen14.jpg" },
//     { id: 15, url: "../../assets/tingshen3n/tingshen15.jpg" },
//     { id: 16, url: "../../assets/tingshen3n/tingshen16.jpg" },
//     { id: 17, url: "../../assets/tingshen3n/tingshen17.jpg" },
//   ],
// });
const photoMap = ref({
  pyq: {
    title: t("circleFriends"),
    list: [
      { id: 1, folder: "gzpyq", url: "gzpyq1" },
      { id: 2, folder: "gzpyq", url: "gzpyq2" },
      { id: 3, folder: "gzpyq", url: "gzpyq3" },
      { id: 4, folder: "gzpyq", url: "gzpyq4" },
      { id: 5, folder: "gzpyq", url: "gzpyq5" },
      { id: 6, folder: "gzpyq", url: "gzpyq6" },
      { id: 7, folder: "gzpyq", url: "gzpyq7" },
      { id: 8, folder: "gzpyq", url: "gzpyq8" },
      { id: 9, folder: "gzpyq", url: "gzpyq9" },
      { id: 10, folder: "gzpyq", url: "gzpyq10" },
      { id: 11, folder: "gzpyq", url: "gzpyq11" },
      { id: 12, folder: "gzpyq", url: "gzpyq12" },
      { id: 13, folder: "gzpyq", url: "gzpyq13" },
    ],
  },
  "3n": {
    title: t("3N"),
    list: [
      { id: 1, folder: "tingshen3n", url: "tingshen1" },
      { id: 2, folder: "tingshen3n", url: "tingshen2" },
      { id: 3, folder: "tingshen3n", url: "tingshen3" },
      { id: 4, folder: "tingshen3n", url: "tingshen4" },
      { id: 5, folder: "tingshen3n", url: "tingshen5" },
      { id: 6, folder: "tingshen3n", url: "tingshen6" },
      { id: 7, folder: "tingshen3n", url: "tingshen7" },
      { id: 8, folder: "tingshen3n", url: "tingshen8" },
      { id: 9, folder: "tingshen3n", url: "tingshen9" },
      { id: 10, folder: "tingshen3n", url: "tingshen10" },
      { id: 11, folder: "tingshen3n", url: "tingshen11" },
      { id: 12, folder: "tingshen3n", url: "tingshen12" },
      { id: 13, folder: "tingshen3n", url: "tingshen13" },
      { id: 14, folder: "tingshen3n", url: "tingshen14" },
      { id: 15, folder: "tingshen3n", url: "tingshen15" },
      { id: 16, folder: "tingshen3n", url: "tingshen16" },
      { id: 17, folder: "tingshen3n", url: "tingshen17" },
    ],
  },
});

onMounted(async () => {});

const swipeItemClick = (i) => {
  const arr = photoMap.value[route.params.key].list.map((item) =>
    getAssetsFile(item.folder, item.url)
  );
  showImagePreview({
    images: arr,
    startPosition: i,
  });
};
</script>

<template>
  <div class="photo">
    <div class="outBox">
      <div class="title">{{ photoMap[route.params.key].title }}</div>
      <van-swipe class="swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          class="swipeItem"
          v-for="(item, index) in photoMap[route.params.key].list"
          :key="item.id"
          @click="swipeItemClick(index)"
        >
          <img
            class="swipeImg"
            :src="getAssetsFile(item.folder, item.url)"
            alt=""
          />
        </van-swipe-item>
      </van-swipe>
      <!-- <van-swipe
        v-if="route.params.key === 'pyq'"
        class="swipe"
        :autoplay="3000"
        indicator-color="white"
      >
        <van-swipe-item class="swipeItem" @click="swipeItemClick(0)">
          <img class="swipeImg" src="../../assets/gzpyq/gzpyq1.jpg" alt="" />
        </van-swipe-item>
        <van-swipe-item class="swipeItem" @click="swipeItemClick(1)">
          <img class="swipeImg" src="../../assets/gzpyq/gzpyq2.jpg" alt="" />
        </van-swipe-item>
        <van-swipe-item class="swipeItem" @click="swipeItemClick(2)">
          <img class="swipeImg" src="../../assets/gzpyq/gzpyq3.jpg" alt="" />
        </van-swipe-item>
        <van-swipe-item class="swipeItem" @click="swipeItemClick(3)">
          <img class="swipeImg" src="../../assets/gzpyq/gzpyq4.jpg" alt="" />
        </van-swipe-item>
        <van-swipe-item class="swipeItem" @click="swipeItemClick(4)">
          <img class="swipeImg" src="../../assets/gzpyq/gzpyq5.jpg" alt="" />
        </van-swipe-item>
        <van-swipe-item class="swipeItem" @click="swipeItemClick(5)">
          <img class="swipeImg" src="../../assets/gzpyq/gzpyq6.jpg" alt="" />
        </van-swipe-item>
        <van-swipe-item class="swipeItem" @click="swipeItemClick(6)">
          <img class="swipeImg" src="../../assets/gzpyq/gzpyq7.jpg" alt="" />
        </van-swipe-item>
        <van-swipe-item class="swipeItem" @click="swipeItemClick(7)">
          <img class="swipeImg" src="../../assets/gzpyq/gzpyq8.jpg" alt="" />
        </van-swipe-item>
        <van-swipe-item class="swipeItem" @click="swipeItemClick(8)">
          <img class="swipeImg" src="../../assets/gzpyq/gzpyq9.jpg" alt="" />
        </van-swipe-item>
        <van-swipe-item class="swipeItem" @click="swipeItemClick(9)">
          <img class="swipeImg" src="../../assets/gzpyq/gzpyq10.jpg" alt="" />
        </van-swipe-item>
        <van-swipe-item class="swipeItem" @click="swipeItemClick(10)">
          <img class="swipeImg" src="../../assets/gzpyq/gzpyq11.jpg" alt="" />
        </van-swipe-item>
        <van-swipe-item class="swipeItem" @click="swipeItemClick(11)">
          <img class="swipeImg" src="../../assets/gzpyq/gzpyq12.jpg" alt="" />
        </van-swipe-item>
        <van-swipe-item class="swipeItem" @click="swipeItemClick(12)">
          <img class="swipeImg" src="../../assets/gzpyq/gzpyq13.jpg" alt="" />
        </van-swipe-item>
      </van-swipe> -->

      <!-- <van-swipe
        v-if="route.params.key === '3n'"
        class="swipe"
        :autoplay="3000"
        indicator-color="white"
      >
        <van-swipe-item class="swipeItem" @click="swipeItemClick(0)">
          <img
            class="swipeImg"
            src="../../assets/tingshen3n/tingshen1.jpg"
            alt=""
          />
        </van-swipe-item>
        <van-swipe-item class="swipeItem" @click="swipeItemClick(1)">
          <img
            class="swipeImg"
            src="../../assets/tingshen3n/tingshen2.jpg"
            alt=""
          />
        </van-swipe-item>
        <van-swipe-item class="swipeItem" @click="swipeItemClick(2)">
          <img
            class="swipeImg"
            src="../../assets/tingshen3n/tingshen3.jpg"
            alt=""
          />
        </van-swipe-item>
        <van-swipe-item class="swipeItem" @click="swipeItemClick(3)">
          <img
            class="swipeImg"
            src="../../assets/tingshen3n/tingshen4.jpg"
            alt=""
          />
        </van-swipe-item>
        <van-swipe-item class="swipeItem" @click="swipeItemClick(4)">
          <img
            class="swipeImg"
            src="../../assets/tingshen3n/tingshen5.jpg"
            alt=""
          />
        </van-swipe-item>
        <van-swipe-item class="swipeItem" @click="swipeItemClick(5)">
          <img
            class="swipeImg"
            src="../../assets/tingshen3n/tingshen6.jpg"
            alt=""
          />
        </van-swipe-item>
        <van-swipe-item class="swipeItem" @click="swipeItemClick(6)">
          <img
            class="swipeImg"
            src="../../assets/tingshen3n/tingshen7.jpg"
            alt=""
          />
        </van-swipe-item>
        <van-swipe-item class="swipeItem" @click="swipeItemClick(7)">
          <img
            class="swipeImg"
            src="../../assets/tingshen3n/tingshen8.jpg"
            alt=""
          />
        </van-swipe-item>
        <van-swipe-item class="swipeItem" @click="swipeItemClick(8)">
          <img
            class="swipeImg"
            src="../../assets/tingshen3n/tingshen9.jpg"
            alt=""
          />
        </van-swipe-item>
        <van-swipe-item class="swipeItem" @click="swipeItemClick(9)">
          <img
            class="swipeImg"
            src="../../assets/tingshen3n/tingshen10.jpg"
            alt=""
          />
        </van-swipe-item>
        <van-swipe-item class="swipeItem" @click="swipeItemClick(10)">
          <img
            class="swipeImg"
            src="../../assets/tingshen3n/tingshen11.jpg"
            alt=""
          />
        </van-swipe-item>
        <van-swipe-item class="swipeItem" @click="swipeItemClick(11)">
          <img
            class="swipeImg"
            src="../../assets/tingshen3n/tingshen12.jpg"
            alt=""
          />
        </van-swipe-item>
        <van-swipe-item class="swipeItem" @click="swipeItemClick(12)">
          <img
            class="swipeImg"
            src="../../assets/tingshen3n/tingshen13.jpg"
            alt=""
          />
        </van-swipe-item>
        <van-swipe-item class="swipeItem" @click="swipeItemClick(13)">
          <img
            class="swipeImg"
            src="../../assets/tingshen3n/tingshen14.jpg"
            alt=""
          />
        </van-swipe-item>
        <van-swipe-item class="swipeItem" @click="swipeItemClick(14)">
          <img
            class="swipeImg"
            src="../../assets/tingshen3n/tingshen15.jpg"
            alt=""
          />
        </van-swipe-item>
        <van-swipe-item class="swipeItem" @click="swipeItemClick(15)">
          <img
            class="swipeImg"
            src="../../assets/tingshen3n/tingshen16.jpg"
            alt=""
          />
        </van-swipe-item>
        <van-swipe-item class="swipeItem" @click="swipeItemClick(16)">
          <img
            class="swipeImg"
            src="../../assets/tingshen3n/tingshen17.jpg"
            alt=""
          />
        </van-swipe-item>
      </van-swipe> -->
    </div>
  </div>
</template>

<style lang="less" scoped>
.photo {
  height: 100%;
  background: url("/public/img/mobile/bg-empty.png") no-repeat bottom center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .outBox {
    width: calc(100vw * 0.9);
    height: calc(100vw * 0.9 * 0.625);
    padding: 16px 6px 6px 6px;
    // margin: auto;
    background: url("/public/img/exhibition-bg.png") no-repeat center center;
    -webkit-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
    position: relative;
    @media only screen and (orientation: landscape) {
      // 横向
      width: calc(100vw * 0.6);
      height: calc(100vw * 0.6 * 0.625);
    }
    .title {
      font-size: 32px;
      font-weight: 600;
      color: #fff;
      position: absolute;
      top: -80px;
      left: 0;
      right: 0;
      text-align: center;
      @media only screen and (orientation: landscape) {
        // 横向
        display: none;
      }
    }
  }
  .swipe {
    .swipeItem {
      .swipeImg {
        width: calc(100vw * 0.9);
        height: calc(100vw * 0.9 * 0.625);
        @media only screen and (orientation: landscape) {
          // 横向
          width: calc(100vw * 0.6);
          height: calc(100vw * 0.6 * 0.625);
        }
      }
    }
  }
}
</style>
